/**
 * Stylesheet dedicated to the menu tab structure. These style classes define the skeleton 
 * of the components and include CSS properties such as margin, padding, display type, dimensions 
 * and positioning. This idea is the one used by JQuery UI.
 * @author Clément HELIOU (clement.heliou@gmail.com)
 * @since 1.0
 */
 
/* Main styles */
.menuTab {
	height: 126px;
	padding-top: 4px;
	position: relative;
}

.menuTab:after {
	bottom: 0px;
	content: "";
	height: 10px;
	left: 2px;
	position: absolute;
	width: 99.6%;
	z-index: -10;
}

/* Menu tab content */
.menuTab>.menuTabContent {
	height: 100%;
}

/* Menu tab items */
.menuTab>.menuTabContent .menuTabItems{
	float: right;
	margin: 20px 10px 0 0;
}

/* Icon of a menu tab item */
.menuTab>.menuTabContent .menuTabItems>.menuTabIcon{
	background-position: center 8px;
	background-repeat: no-repeat;
}

.menuTab>.menuTabContent .menuTabItems>.menuTabIcon:hover{
	background-position: center top;
}

/* Single menu tab item */
.menuTab>.menuTabContent .menuTabItems>.menuTabItem{
	display: table-cell;
	height: 78px;
	text-align: center;
	vertical-align: bottom;
	width: 160px;
}